<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线计算器-由@tim1103出品</title>
	</head>
	<style>
		#view{
			text-align: right;
			padding: 0px 5px;
			border-radius:39px;
			margin: 12px 7px;
			width: 370px;
			height: 75px;
			border: 2px solid #ccc;
			font-size: 2em;
			color: #999;
			outline: none;
		}
		div{border-radius: 20px;
			width: 400px;
			height: 580px;
			background-color: rgb(20, 222, 94);
			margin: 0 auto;
		}
		ul{
			padding: 0px;
			margin: 0px;
			margin-left: 17px;
		}
		ul li{
			font-weight: bold;
			background-color: rgb(26, 223, 134);
			font-size: 2em;
			border-radius: 20px;
			margin: 4px 4px 4px 4px;
			line-height: 86px;
			text-align: center;
			width: 84px;
			height: 84px;
			list-style: none;
			float: left;
			box-shadow: 2px 2px 1px #555;
		}
		ul li:hover{
			color: #fff;
			background-color: rgb(129, 209, 95);
			box-shadow: -2px -2px 1px #555;
		}
		#btn{
			border-radius: 50px;
			background: #14de5a;
			box-shadow:  20px 20px 59px #085924, -20px -20px 59px #20ff90;
		}
		html{
			background-color:#14de5a;
		}
	</style>
	<div id="btn">
		<input type="text" name="" id="view" value="0">
		<ul>
			<li>±</li>
			<li>(</li>
			<li>)</li>
			<li>+</li>
		</ul>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>-</li>
		</ul>
		<ul>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>*</li>
		</ul>
		<ul>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>/</li>
		</ul>
		<ul>
			<li>C</li>
			<li>0</li>
			<li>.</li>
			<li>=</li>
		</ul>
		<script>
			window.onload = function() { //浏览器加载完毕时执行
				clickBtn();
			}
			var i = 1; //约束小数点
			var j = 1; //约束左括号
			var k = 1; //约束右括号
			function clickBtn() { //单击按钮
				if (!document.getElementById) return false;
				if (!document.getElementsByTagName) return false;
				if (!document.getElementById("view")) return false;

				var li = document.getElementsByTagName("li"); //获取按钮元素节点
				for (var i = 0; i < li.length; i++) {
					li[i].onclick = function() { //单击相应按钮
						keyClick(this);
					}
				}
			}
			var shu = ""; //定义一个字符串
			function xianshi(name) {
				if (!document.getElementById) return false;

				var view = document.getElementById("view");
				// alert(view.value.charAt(view.value.length-1));
				shu += name; //进行字符串拼接
				view.value = shu; //显示
			}

			function yunsuan() {
				if (!document.getElementById) return false;

				var view = document.getElementById("view");
				var jieguo = eval(view.value);
				/*eval 函数允许 JScript 源代码的动态执行。
					eval("var mydate = new Date();");
				  slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
					用于删除单个字符  view.value.slice(0,view.vlaue.length-1);
				*/
				view.value = jieguo; //显示结果
				shu = jieguo; //将结果值存到变量中
			}

			function qingping() {
				if (!document.getElementById) return false;

				var view = document.getElementById("view");
				view.value = "0"; //显示0
				shu = ""; //并将字符串清空
			}

			function keyClick(li) { //对每个按钮进行处理
				if (!document.getElementById) return false;

				var view = document.getElementById("view"); //获取显示
				if (li.firstChild.nodeValue == "C") { //如果单击"C"
					i = 1;
					qingping(); //进行清屏操作
				} else if (li.firstChild.nodeValue == "±") { //单击±按钮执行操作
					if (isNaN(view.value)) {
						//什么都不执行
					} else {
						view.value = 0 - view.value;
					}
				} else if (li.firstChild.nodeValue == "0") { //单击0执行操作
					if (view.value == "0") {
						//什么都不执行
					} else {
						xianshi(li.firstChild.nodeValue);
					}
				} else if (li.firstChild.nodeValue == ")") { //单击)执行操作
					if (view.value.charAt(view.value.length - 1) == "+") {
						xianshi("0" + li.firstChild.nodeValue);
					} else {
						xianshi(li.firstChild.nodeValue);
					}
				} else if (li.firstChild.nodeValue == ".") { //单击.执行操作
					/*var ss = document.getElementById("input");
						var n = ss.value.indexOf(".");
						if(n>0){alert('只能输入一位数小数点');*/
					/*
					charAt() 返回在指定位置的字符。*/
					if (i == 0) {
						//什么都不执行
					} else {
						i = 0;
						if (view.value == 0 || view.value.charAt(view.value.length - 1) == "+" || view.value.charAt(view.value.length - 1) ==
							"-" || view.value.charAt(view.value.length - 1) == "*" || view.value.charAt(view.value.length - 1) == "/") {
							xianshi("0.");
						} else {
							xianshi(li.firstChild.nodeValue);
						}
					}
					// this.firstChild.nodeValue.match(".")
				} else if (li.firstChild.nodeValue == "+" || li.firstChild.nodeValue == "-" || li.firstChild.nodeValue == "*" || li
					.firstChild.nodeValue == "/") { //单击运算符号执行操作
					if (view.value == 0 || view.value.charAt(view.value.length - 1) == "(") {
						i = 1;
						xianshi("0" + li.firstChild.nodeValue);
					} else {
						if (view.value.charAt(view.value.length - 1) == "+" || view.value.charAt(view.value.length - 1) == "-" || view.value
							.charAt(view.value.length - 1) == "*" || view.value.charAt(view.value.length - 1) == "/") {
							//什么都不执行
						} else {
							i = 1;
							xianshi(li.firstChild.nodeValue);
						}
					}
				} else if (li.firstChild.nodeValue == "=") { //单击等号执行操作
					yunsuan(); //进行运算
				} else { //单击数字按钮执行操作
					xianshi(li.firstChild.nodeValue); //单击按钮进行显示
				}
			}
		</script>
		<script src="https://cdn.jsdelivr.net/gh/weblab/static@master/all/all.js"></script>
</html>
